<template>
  <div class="warpc">
    <header>
      <div>
        <van-icon name="arrow-left" @click="tui()"/>
      </div>
      <h3>问大家(306)</h3>
      <div class="right">
        <van-icon name="orders-o" />
        <van-icon name="share-o" />
      </div>
    </header>


    <div v-for="(v,i) in askarr" :key='i'>
      <div class="contentask">
        <div class="oneline">
          <div>
            <span class="oneask">问</span>
            <span class="askcont">{{v.ask}}</span>
          </div>
          <span class="asknum">3 个问答</span>
        </div>
        <div class="twoline">
          <div class="answer">
            <span class="da">答</span>
            <div class="answercont">
              <div class="answercontimg">
                <img :src="v.userImg" alt="" class="userimg"/>
                <span>{{v.userName}}</span>
                <img src="chenkong/imgs/usk/1.gif" alt="" /><span class="assed"
                  >评价后回答</span
                >
              </div>
              <span>{{v.answer}}</span>
            </div>
          </div>
          <div class="dz"><img src="chenkong/imgs/usk/3.gif" alt="" /></div>
        </div>
      </div>
    </div>


    <footer>
      <div>
        我要提问
      </div>
    </footer>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  
  data(){
    return{
      askarr:[]
    }
  },

  methods:{
        tui(){
            this.$router.go(-1)
        }
        
  },

  mounted(){
        axios.get("http://localhost:8889/zask").then((ok)=>{
            this.askarr=ok.data
            console.log(ok.data);
        })
    }
  
};
</script>

<style lang="scss" scoped>
.warpc {
  width: 100%;
  .userimg{
    width:5.333vw;
    height:5.333vw;
    border-radius:50%;
  }
  header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 12.267vw;
    border-bottom: 0.267vw solid #f4f4f4;
    padding: 0 4vw;
    i{
      font-size: 5.867vw;
    }
    .right{
      i{
        margin-left: 1.333vw;
        font-weight: 700;
      }
    }
  }
  .contentask {
    margin: auto;
    width: 90%;
    // background: green;
    line-height: 6.667vw;
    font-size: 3.2vw;
    padding-bottom: 5.333vw;
    border-bottom: 0.267vw solid #f2f2f2;
    margin-top: 4.267vw;

    .oneline {
      display: flex;
      justify-content: space-between;

      .oneask {
        color: #fff;
        padding: 0.8vw;
        background: #f66c38;
      }
      .askcont {
        font-weight: bold;
        font-size: 3.733vw;
        padding-left: 1.6vw;
      }
      .asknum {
        color: #c3c3c3;
      }
    }
    .twoline {
      margin-top: 4.267vw;
      display: flex;
      justify-content: space-between;

      .answer {
        display: flex;
        .da {
          color: #fff;
          padding: 0.8vw;
          background: #7db2d9;
          height: 4.507vw;
          line-height: 4.507vw;
        }
        .answercont {
          padding-left: 1.6vw;
          .answercontimg {
            display: flex;
            img {
              vertical-align: middle;
              padding: 0 1.067vw;
            }
            .assed {
              font-size: 2.667vw;
              // padding: 0.8vw;
              margin-top: 1.6vw;
              text-align: center;
              width: 16vw;
              height: 4vw;
              line-height: 4vw;
              border: 0.267vw solid #e8a298;
              color: #e8a298;
            }
          }
        }
      }
    }
  }

  footer{
    width: 100%;
    border-top: 0.267vw solid #f4f4f4;
    div{
      width: 90%;
      height: 12.267vw;
      background-color: #f66c38;
      border-radius: 6.667vw;
      text-align: center;
      line-height: 12.267vw;
      color: white;
      margin: 0 auto;
    }
  }
}
</style>